<template>
	<view>
		<page-header :logo='logo' :classsw='classshow'></page-header>
		<view class="content_natural_page">
			<image :src="frisobabykv" :mode="mode"></image>
			<view class="gold_three">
				<view class="gold_three_view">
					<image :src="left_cattle"></image>
				</view>
				<view class="gold_three_view">
					<image :src="right_cattle" @tap='linkbtn' :data-webview="right_cattle_url"></image>
				</view>
				<view class="gold_three_bom">
					<image class="gold_three_up" :src="left_milk" @tap='linkbtn' :data-webview="left_milk_url"></image>
					<image class="gold_three_dowm" :src="icon_more" @tap='linkbtn' :data-webview="icon_more_url"></image>
				</view>
				<view class="gold_three_bom">
					<image class="gold_three_up" :src="right_milk" @tap='linkbtn' :data-webview="right_milk_url"></image>
					<image class="gold_three_dowm" :src="icon_more" @tap='linkbtn' :data-webview="section_url"></image>
				</view>
			</view>

			<image :src="gold_one2" :mode="mode"></image>
			<image :src="gold_one3" :mode="mode"></image>
			<image :src="xiaofenzi" :mode="mode"></image>
			<image :src="gosm" :mode="mode"></image>
			<image :src="mobile1" :mode="mode"></image>
			<image class="video" @tap='videoClick' :mode="mode" :src="gold_one05"></image>
			<ms-video ref='video' :poster='videoshow'></ms-video>

		</view>

		<footer-text></footer-text>
		<page-footer></page-footer>
		<gototop></gototop>
	</view>
</template>

<script>
	import footerText from '@/components/footer-text.vue'
	import gototop from '@/components/gototop.vue'
	import video from '@/components/ms-video.vue'
	export default {
		data() {
			return {
				mode: 'widthFix',
				classshow: 'indexclass',
				logo: 'https://www.frisobaby.com/media/1725/logo.png',
				videoshow: 'https://www.frisobaby.com/media/1799/youku-1920-1080-30s-20m.mp4',
				bar_icon: 'https://www.frisobaby.com/resources/images/mobile/index/bar_icon.png',
				frisobabykv: 'https://www.frisobaby.com/media/1640/frisobabykv.jpg',
				left_cattle: 'https://www.frisobaby.com/resources/images/mobile/gold_one/left_cattle.png',
				
				right_cattle: 'https://www.frisobaby.com/media/1633/right_cattle.png',
				right_cattle_url:'https://www.frisobaby.com/mobile/products/friso-baby/section-2/',
				
				left_milk: 'https://www.frisobaby.com/media/1634/left_milk.png',
				left_milk_url:'https://www.frisobaby.com/mobile/products/friso-baby/section-3/',
				
				right_milk: 'https://www.frisobaby.com/media/1635/right_milk.png',
				right_milk_url:'https://www.frisobaby.com/mobile/products/friso-baby/section-4/',
				
				icon_more: 'https://www.frisobaby.com/resources/images/mobile/gold_one/icon_more.png',
				icon_more_url:'https://www.frisobaby.com/mobile/products/friso-baby/section-3/',
				section_url:'https://www.frisobaby.com/mobile/products/friso-baby/section-4/',
				
				gold_one2: 'https://www.frisobaby.com/media/1632/gold_one2.jpg',
				gold_one3: 'https://www.frisobaby.com/media/1638/gold_one3.jpg',
				gold_one05: 'https://www.frisobaby.com/media/1794/gold_one05.jpg',
				gosm: 'https://www.frisobaby.com/media/1793/gos-m.jpg',
				mobile1: 'https://www.frisobaby.com/media/1807/mobile1.jpg',
				menu_border_bg: 'https://www.frisobaby.com/resources/images/mobile/menu_border_bg.png',
				xiaofenzi: 'https://www.frisobaby.com/media/1792/90小分子-m.jpg',
				recod: 'https://www.frisobaby.com/resources/images/pc/record.png',

			}

		},
		onLoad() {

		},
		methods: {
			videoClick: function() {
				this.$refs.video.videoClick()
			},
			linkbtn: function(e) {
				var webview = e.currentTarget.dataset.webview
				if (webview !== '') {
					uni.navigateTo({
						url: '/pages/link/link?url=' + webview
					})
				}
			},
		},
		components: {
			'footer-text': footerText,
			'gototop': gototop,
			'ms-video': video,
		},
		onShareAppMessage: function() {
			return {
				title: '美素佳儿',
				desc: '美素佳儿',
				path: 'pages/index/index'
			}
		}
	}
</script>

<style>
	image {
		width: 100%;
		height: 100%;
	}

	.content_natural_page {
		margin-top: 80upx;
		font-size: 0;
	}

	.zero {
		font-size: 0;
	}

	.zero image {
		width: 100%;
		height: 100%;
	}

	.gold_three {
		width: 100%;
		background: url(../../static/gold_one1.jpg) no-repeat;
		overflow: hidden;
		clear: both;
		text-align: center;
		font-size: 0;
		background-size: 100%;
		background-position: center -10upx;

	}

	.gold_three_view {
		padding-bottom: 10upx;
	}

	.gold_three_view image {
		width: 220upx;
		height: 160upx;
	}

	.gold_three_bom .gold_three_up {
		width: 178upx;
		height: 176upx;
		display: block;
		margin: auto;
	}

	.gold_three_bom .gold_three_dowm {
		width: 138upx;
		height: 54upx;
		margin: 10upx auto 10upx;
		display: block;
	}

	.gold_three view {
		width: 50%;
		float: left;
		min-height: 230upx;
		padding-top: 0upx;
		display: block;
	}

	.gold_three_page {
		font-size: 0;
	}

	.gold_three_page image {
		margin-top: -2upx;
	}

	.content_natural_page .pop_content .tag {
		margin-top: 20upx;
		top: 455upx;
		position: absolute;
		width: 100%;
		text-align: right;
		color: #ffffff;
		font-size: 18upx;
	}
</style>
